<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="robots" content="index, follow" />
        <meta name="keywords" content="Traffico e viabilità in tempo reale, traffico italia, infomobilità, aggiornamenti traffico, transitabilità, situazione traffico, bollettino traffico, rallentamenti, lavori in corso, code, interruzioni, deviazioni" />
        <meta name="title" content="Informazioni sul traffico" />
        <meta name="author" content="domenico.giffone" />
        <meta name="description" content=" Le informazioni sul traffico e la viabilità in tempo reale su autostrade, tangenziali e statali di tutta Italia" />
        <meta name="google-site-verification" content="95qHCE07gFPN0MjFPkGd1eg5gQXiKtd7BgsbClfTFek" />
        <title>Informazioni sul traffico</title>
        <style type="text/css">
            body { font-family: helvetica, arial, sans-serif; font-size: 70%; color: #333; }
            a { text-decoration: none; color: #900; }

            a, a:visited, a:hover {
                color: #00c;
            }

            a:active {
                color: #f00;
            }

            #pixel_image {
                position: absolute;
                top: -1000px;
            }

            #left_panel {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 400px;
                padding: 10px;
            }

            #right_panel {
                position: absolute;
                top: 0px;
                left: 420px;
                width: 700px;
                padding: 10px;
            }

            #logo {
                height: 50px;
                background: transparent url(img/logo_m1.png) no-repeat  scroll top left;
            }

            #logo > #title {
                padding: 0 0 0 40px;
                font-family: helvetica;
                font-size: 16pt;
                color: #333;
            }

            #logo > #slogan {
                padding-left: 40px;
                color: #888;
            }

            #fp_form {
                background: #E5ECF9 none repeat scroll 0 0;
                border:1px solid #3366CC;
                font-size:1.3em;
                font-weight:bold;
                padding:10px;
                height: 60px;
                -moz-border-radius-bottomleft: 5px;
                -moz-border-radius-bottomright: 5px;
                -moz-border-radius-topleft: 5px;
                -moz-border-radius-topright: 5px;
            }

            #fp_form label { display: block;}

            #fp_form #address { margin:5px 5px 0 0;  padding-left:3px; width:220px;}

            #fp_form #submit { margin:22px 0px 0 0;  padding-left:3px; width:50px;}

            #fp_form .options {
                float: left;
                margin-right: 5px;
            }

            #fp_form select {
                margin:5px 5px 0 5px;
                padding-left:3px;
                text-align: right;
                width: 70px;
            }

            /**** right_panel contents ****/

            #map_container {
                border: 1px solid #aaa;
                height: 500px;
                overflow: hidden;
            }

            #map {
                width: 100%;
                height: 100%;
            }

            #footer {
                margin-top: 30px;
                font-size: 1.2em;
                color: #888;
                font-size: 100%;
            }

            #footer p {
                margin-bottom: 1.2em;
            }

            /* infowindows */

            .infowindow {
                font-size: 1.2em;
                height: 100px;
                padding: 5px;
                overflow: auto;
            }

            .infowindow > .title {
                color: #111;
                font-weight: bold;
                font-size: 1.5em;
                padding-bottom: 10px;
            }

            .infowindow > .description {
                color: #333;
            }

            .infowindow .address {
                padding-bottom: 10px;
            }

            #results {margin-top: 10px;}

            .message {color: #767676; margin-top: 10px; text-align: center;}

            .error {color: #a71010; padding: 2px; text-align: center;}

            dl {padding-bottom: 4px;}

            dl dt { float:left;
                    margin: 10px 10px 0 0;
                    padding:5px;
                    width:80px;
                    text-align: center;}

            dl dd {padding: 2px 0 0 2px; margin: 0 0 0 90px; padding: 0 0 0 1em;}

            #date{font-size: 90%; font-weight: lighter; color: #767676;}

            #title{font-size: 110%; font-weight: bold;}

            #summary{font-size: 100%; font-weight: lighter;}
        </style>
        <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA8s_QKwwJi04YW6ci8MSBIRQWyTMGNyKHSk1Vxm53pv6AN_kaJxSiCbAWdejqWQt6Q677QQsk3kqdtw"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key=AIzaSyCjmKLfOl-f9xYi7nrlYMIvQLUCIBCbt2c"></script>
        <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>
        <script type="text/javascript" charset="utf-8">
            google.load("jquery", "1.4.2");
        </script>
        <script type="text/javascript">
            var initialLocation;
            var rome = new google.maps.LatLng(41.8954656, 12.4823243);
            var browserSupportFlag =  new Boolean();
            var geocoder;
            var map;
            var infowindow = new google.maps.InfoWindow();
            var marker = new google.maps.Marker();

            /**
             * Converts an xs:date or xs:dateTime formatted string into the local timezone
             * and outputs a human-readable form of this date or date/time.
             *
             * @param {string} gCalTime is the xs:date or xs:dateTime formatted string
             * @return {string} is the human-readable date or date/time string
             */
            function formatGCalTime(gCalTime) {
                // text for regex matches
                var remtxt = gCalTime;

                function consume(retxt) {
                    var match = remtxt.match(new RegExp('^' + retxt));
                    if (match) {
                        remtxt = remtxt.substring(match[0].length);
                        return match[0];
                    }
                    return '';
                }

                // minutes of correction between gCalTime and GMT
                var totalCorrMins = 0;

                var year = consume('\\d{4}');
                consume('-?');
                var month = consume('\\d{2}');
                consume('-?');
                var dateMonth = consume('\\d{2}');
                var timeOrNot = consume('T');

                // if a DATE-TIME was matched in the regex
                if (timeOrNot == 'T') {
                    var hours = consume('\\d{2}');
                    consume(':?');
                    var mins = consume('\\d{2}');
                    consume('(:\\d{2})?(\\.\\d{3})?');
                    var zuluOrNot = consume('Z');

                    // if time from server is not already in GMT, calculate offset
                    if (zuluOrNot != 'Z') {
                        var corrPlusMinus = consume('[\\+\\-]');
                        if (corrPlusMinus != '') {
                            var corrHours = consume('\\d{2}');
                            consume(':?');
                            var corrMins = consume('\\d{2}');
                            totalCorrMins = (corrPlusMinus=='-' ? 1 : -1) *
                                (Number(corrHours) * 60 +
                                (corrMins=='' ? 0 : Number(corrMins)));
                        }
                    }

                    // get time since epoch and apply correction, if necessary
                    // relies upon Date object to convert the GMT time to the local
                    // timezone
                    var originalDateEpoch = Date.UTC(year, month - 1, dateMonth, hours, mins);
                    var gmtDateEpoch = originalDateEpoch + totalCorrMins * 1000 * 60;
                    var ld = new Date(gmtDateEpoch);

                    // date is originally in YYYY-MM-DD format
                    // time is originally in a 24-hour format
                    // this converts it to MM/DD hh:mm (AM|PM)
                    dateString = ld.getHours() + ':' + ((ld.getMinutes()<10)?('0' +
                        ld.getMinutes()):(ld.getMinutes())) + "  " +
                        ld.getDate() + '/' + (ld.getMonth() + 1) + '/' + ld.getFullYear()
                         
                } else {
                    // if only a DATE was matched
                    dateString =  parseInt(month, 10) + '/' + parseInt(dateMonth, 10);
                }
                return dateString;
            }

            function initialize() {
                geocoder = new google.maps.Geocoder();
                var myOptions = {
                    zoom: 9,
                    scaleControl: true,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map"), myOptions);

                //Handle click event
                google.maps.event.addListener(map, 'click', function(event) {
                    initialLocation = event.latLng;
                    getAddress(event.latLng);
                });

                //Handle marker click event

                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });

                // Try W3C Geolocation method (Preferred)
                if(navigator.geolocation) {
                    browserSupportFlag = true;
                    navigator.geolocation.getCurrentPosition(function(position) {
                        initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                        getAddress(initialLocation, 9);
                    }, function() {
                        handleNoGeolocation(browserSupportFlag);
                    });
                } else if (google.gears) {
                    // Try Google Gears Geolocation
                    browserSupportFlag = true;
                    var geo = google.gears.factory.create('beta.geolocation');
                    geo.getCurrentPosition(function(position) {
                        initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
                        getAddress(initialLocation, 9);
                    }, function() {
                        handleNoGeolocation(browserSupportFlag);
                    });
                } else {
                    // Browser doesn't support Geolocation
                    browserSupportFlag = false;
                    handleNoGeolocation(browserSupportFlag);
                }
            }

            function handleNoGeolocation(errorFlag) {
                if (errorFlag == true) {
                    initialLocation = rome;
                    map.setZoom(5);
                    map.setCenter(initialLocation);
                } else {
                    initialLocation = rome;
                    map.setZoom(5);
                    map.setCenter(initialLocation);
                }
            }

            function getAddress(latlng, zoom) {
                if (geocoder) {
                    geocoder.geocode({'latLng': latlng}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (results[1]) {
                                infowindow.setContent(results[0].formatted_address);
                                map.setCenter(initialLocation);
                                marker.setPosition(initialLocation);
                                marker.setMap(map);
                                updateTrafficForm(initialLocation);
                                setAddress(results);
                                if (zoom) {
                                    map.setZoom(zoom);
                                }
                            } else {
                                error("No results found");
                            }
                        } else {
                            error("Geocoder failed due to: " + status);
                        }
                    });
                }
            }

            function setAddress(results) {
                address = document.getElementById("address");
                address.value = results[2].formatted_address;
            }

            function updateTrafficForm(latlng) {
                lat = document.getElementById("lat");
                lng = document.getElementById("lng");
                lat.value=latlng.lat();
                lng.value=latlng.lng();
            }


            function updateUserLocation(form){
                if (geocoder) {
                    geocoder.geocode( { 'address': form.address.value}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            initialLocation = results[0].geometry.location;
                            getAddress(initialLocation, 9);
                        } else {
                            error("Geocode was not successful for the following reason: " + status);
                        }
                    });
                }
            }

            function updatePosition() {
                initialLocation = new google.maps.LatLng($("#lat").val(),$("#lng").val());
                getAddress(initialLocation, 9);
            }

            function search(form) {
                if(form.lat.value== "" || form.lng.value == "") {
                    if (form.address.value != "") {
                        updateUserLocation(form);
                    } else {
                        return false;
                    }
                }
                message('Ricerca in corso... <img src="img/spinner.gif" title="Loader" alt="Loader" />');
                var url = "/resource/TRAFFIC/search";
                var data = {
                    lat: form.lat.value,
                    lng: form.lng.value,
                    rng: form.rng.value
                };
                $.ajax({
                    url: url,
                    data: data,
                    dataType: 'json',
                    timeout: 30000,
                    success: function(result, status) {
                        var html='';
                        var dlS = '<dl id="entry">';
                        var dtS ='<dt>';
                        var dtE='</dt>';
                        var dddS='<dd id="date">';
                        var dddE='</dd>';
                        var ddtS='<dd id="title">';
                        var ddtE='</dd>';
                        var ddsS='<dd id="summary">';
                        var ddsE='</dd>';
                        var dlE='</dl>';
                        var imgS='<img src="img/traffic/48/';
                        var imgS1='.png" title="';
                        var imgE1='" alt="';
                        var imgE='" />';

                        if (result.entries == null || result.entries.length < 1) {
                            $('#results').html('');
                            message('<div style="text-align: center; margin: 0 10px 0 10px;">nessuna segnalazione recente nel raggio selezionato</div>');
                        } 

                        $.each(result.entries, function(i, entry){
                            var distance = '';
                            var term = 'UNKNOWN';
                            var label = 'evento sconosciuto';
                            $.each(entry.extensions, function(i, extension) {
                                if (extension.name == 'gml:distance') {
                                    distance += Math.round(extension.children[0] / 100) / 10 + ' KM';
                                }
                            });
                            $.each(entry.categories, function(i, category) {
                                if (category.term) {
                                    term = category.term;
                                    label = category.label;
                                }
                            });
                            var date =  formatGCalTime(entry.published);
                            var dt = date + " - " + distance;
                            html += dlS+dtS+imgS+term+imgS1+label+imgE1+label+imgE+dtE+dddS+dt+dddE+ddtS+entry.title+ddtE+ddsS+entry.summary+ddsE+dlE;
                        });
                        message('<img src="img/feed.png" title="Feed Atom" alt="Feed Atom" /> <a href="'
                            + url + '.xml?lat=' + data.lat + '&lng=' + data.lng + '&rng=' + data.rng +
                            '">Feed Atom relativo al raggio selezionato</a>');
                        $('#results').html(html);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        $('#results').html('');
                        error('Errore nel recuperare i dati.');
                    }
                });
            }

            function message(msg) {
                $('#message').removeClass().addClass('message').html(msg).fadeIn();
            }

            function error(msg) {
                $('#message').removeClass().addClass('error').html(msg).fadeIn();
            }
        </script>
    </head>
    <body onload="initialize()">
        <div id="left_panel">
            <div id="logo">
                <div id="title">InfoTraffico</div>
                <div id="slogan">Ricerca informazioni sul traffico in base alla località</div>
            </div>
            <form id="fp_form" action="" onsubmit="javascript:search(this); return false;">
                <div class="options"><label for="address">vicino a:</label>
                    <input type="search" name="address" id="address" onblur="javascript:updateUserLocation(this.form);"/>
                </div>
                <div class="options">
                    <label for="rng">raggio:</label>
                    <select name="rng" id="rng">
                        <option value="100">100 km</option>
                        <option value="200">200 km</option>
                        <option value="400">400 km</option>
                    </select>
                </div>
                <input type="hidden" name="lat" id="lat">
                <input type="hidden" name="lng" id="lng">
                <div class="options">
                    <input type="submit" id="submit"  value="Cerca"/>
                </div>
            </form>
            <div id="message" style="display: none;"></div>
            <div id="results"></div>
        </div>
        <div id="right_panel">
            <div id="map_container">
                <div id="map"></div>
            </div>
            <div id="footer">
                <p>AVVERTENZE: Non si fornisce nessuna garanzia sulla correttezza e sulla precisione dei dati visualizzati.</p>
                <p>Le informazioni sul traffico sono di proprietà del CCISS e vengono acquisite dal 
                    <a href="http://www.cciss.it/portale/rss?rsstype=traffic">feed Rss</a> disponibile sul
                    <a href="http://www.cciss.it/">sito del CCISS</a>.<br/>
                    La geolocalizzazione è realizzata ricorrendo al <a href="http://www.geonames.org/rss-to-georss-converter.html">servizio di geolocalizzazione Rss</a>
                    fornito da <a href="http://www.geonames.org/">Geonames</a>.</p>
                <p>Le icone impiegate si chiamano <a href="http://www.famfamfam.com/lab/icons/silk/" >silk</a> e sono fornite dal sito <a href="http://www.famfamfam.com/">FAMFAMFAM</a>.</p>
                <p>Le icone relative al traffico provengono da <a href="http://commons.wikimedia.org/">Wikimedia Commons</a>, sono distributite secondo <a href="http://commons.wikimedia.org/wiki/Commons:Reusing_content_outside_Wikimedia">le licenze indicate</a> e sono state rielaborate per adattarle alla risoluzione impiegata.</p>
                <p>I sorgenti dell'applicazione sono disponibili con <a href="http://www.apache.org/licenses/LICENSE-2.0.html">licenza Apache 2</a> sul <a href="http://code.google.com/p/trafficando/">sito del progetto</a> e sono scaricabili
                    da <a href="http://code.google.com/p/trafficando/source/checkout">qui</a>.</p>
                <p>Per informazioni o commenti scrivere a domenico.giffone[AT]gmail.com.</p>
                <p></p>
            </div>
        </div>
        <script type="text/javascript">
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
            try {
                var pageTracker = _gat._getTracker("UA-13089930-2");
                pageTracker._trackPageview();
            } catch(err) {}
        </script>
    </body>
</html>
